import Login from "../page/login";
import Article from "../page/article";
import { createBrowserRouter, createHashRouter } from "react-router-dom";
import Layout from "../page/layout";
import Board from "../page/board";
import About from "../page/about";
import NotFound from "../page/notfound";

// 俩种路由模式
// 各个主流框架的路由常用的路由模式有俩种，history模式和hash模式, ReactRouter分别由 createBrowerRouter 和createHashRouter 函数负责创建
// history路由模式url表现为：url/login
// hash路由模式url表现为：url/#/login

// 切换路由模式，只需要把createBrowserRouter改成createHashRouter，剩下的配置都不用动
const router = createBrowserRouter([
    {
        // 嵌套路由配置
        // 1. 使用children属性配置路由嵌套关系
        // 2. 使用'<Outlet/>'组件配置二级路由渲染位置
        path: '/',
        element: <Layout/>,
        children: [
            // 设置默认二级路由，一级路由访问的时候，它也能得到渲染, 设置方式：去掉path属性，增加index属性为true
            {
                // path: 'board',
                index: true,
                element: <Board/>
            },
            {
                path: 'about',
                element: <About/>
            }
        ]
    },
    {
        path: '/login',
        element: <Login/>
    },
    {
        path: '/article1',
        element: <Article/>
    },
    {
        // params传参需要增加占位符
        path: '/article2/:id/:name',
        element: <Article/>
    },
    {
        // 404路由配置
        // 场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染
        path: '*',
        element: <NotFound/>
    }
])

export default router